<template>
  <div>
    <div class="header-btn">
      <div>企微群详情</div>
      <div>
        <el-button type="info" plain @click="goBack">返回</el-button>
      </div>
    </div>
    <!-- 基础详情 -->
    <div class="wrap g-card" style="margin-bottom: 20px">
      <div class="title-header">基础详情</div>
      <el-form ref="form" label-width="120px" label-position="right" style="position: relative">
        <el-form-item label="群名"> {{details.groupName}}</el-form-item>
        <el-form-item label="群主"> {{details.groupLeaderName}} </el-form-item>
        <el-form-item label="群标签">
          <tag-group v-model="details.tagVOS" :disabled="true" />
        </el-form-item>
      </el-form>
    </div>
    <!-- 实时数据 -->
    <div class="wrap g-card">
      <div class="title-header">实时数据</div>
      <div class="module-list">
        <div class="module">
          <div class="number">{{ details.memberCount }}</div>
          <div class="label">群人数</div>
        </div>
        <div class="module">
          <div class="number">{{ details.toDayMemberNum }}</div>
          <div class="label">今日新增</div>
        </div>
        <div class="module">
          <div class="number">{{ details.todayLossMemberCount }}</div>
          <div class="label">今日流失</div>
        </div>
      </div>
    </div>
    <!-- 群成员 -->
    <div class="wrap g-card" style="margin-bottom: 20px">
      <div class="title-header">群成员</div>
      <div style="padding: 0 20px">
        <NormalForm :isShowCard="false" :operateForm="queryGroupForm" :formList="formGroupList" :enumOpt="enumOpt" @handleQuery="handleGroupQuery" @handleReset="handleGroupReset"></NormalForm>
      </div>
      <div style="padding: 20px">
        <el-table v-loading="groupLoading" :data="customerList" style="width: 100%" height="415">
          <el-table-column type="index" width="55" align="center" label="序号" />
          <el-table-column label="成员名称" align="center" prop="name" show-overflow-tooltip></el-table-column>
          <el-table-column label="成员类型" prop="type" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <span v-if="row.type == 2">外部联系人</span>
              <span v-if="row.type == 1">企业成员</span>
            </template>
          </el-table-column>
          <el-table-column label="入群时间" align="center" prop="joinTime" show-overflow-tooltip />
          <el-table-column label="入群方式" align="center" prop="joinScene" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <span v-if="row.joinScene == 1">直接邀请入群</span>
              <span v-if="row.joinScene == 2">通过邀请链接入群</span>
              <span v-if="row.joinScene == 3">通过扫描群二维码入群</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="160" class-name="small-padding fixed-width">
            <template slot-scope="{ row }">
              <div class="option-span">
                <span @click="detailRouter(row.sid)" v-if="row.flag === true">详情</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <NormalPagination :currentPage="queryGroupForm.pageNum" :pageSize="queryGroupForm.pageSize" :total="groupTotal" @handleSizeChange="handleGroupSizeChange" @handleCurrentChange="handleGroupCurrentChange"></NormalPagination>
      </div>
    </div>
    <!-- 退群成员 -->
    <div class="wrap g-card" style="margin-bottom: 20px">
      <div class="title-header">退群成员</div>
      <div style="padding: 0 20px">
        <NormalForm :isShowCard="false" :operateForm="queryOutGroupForm" :formList="formOutGroupList" :enumOpt="enumOpt" @handleQuery="handleOutGroupQuery" @handleReset="handleOutGroupReset"></NormalForm>
      </div>
      <div style="padding: 20px">
        <el-table v-loading="outLoading" :data="lossCustomerList" style="width: 100%" height="415">
          <el-table-column type="index" width="55" align="center" label="序号" />
          <el-table-column label="成员名称" align="center" prop="name" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="成员类型" prop="type" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <span v-if="row.type === 2">外部联系人</span>
              <span v-if="row.type === 1">企业成员</span>
            </template>
          </el-table-column>
          <el-table-column label="退群时间" align="center" prop="updateTime" show-overflow-tooltip />
          <el-table-column label="入群时间" align="center" prop="joinTime" show-overflow-tooltip />
          <el-table-column label="入群方式" align="center" prop="joinScene" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <span v-if="row.joinScene == 1">直接邀请入群</span>
              <span v-if="row.joinScene == 2">通过邀请链接入群</span>
              <span v-if="row.joinScene == 3">通过扫描群二维码入群</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="160" class-name="small-padding fixed-width">
            <template slot-scope="{ row }">
              <div class="option-span">
                <span @click="detailRouter(row.sid)" v-if="row.flag === true">详情</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <NormalPagination :currentPage="queryOutGroupForm.pageNum" :pageSize="queryOutGroupForm.pageSize" :total="outGroupTotal" @handleSizeChange="handleOutGroupSizeChange" @handleCurrentChange="handleOutGroupCurrentChange"></NormalPagination>
      </div>
    </div>
  </div>
</template>

<script>
import { checkOrUpdateTask, messagerecord, findLossMemberList } from '../../../api/groupList/groupList'

export default {
  name: 'listDetail',
  data() {
    return {
      // 群成员
      queryGroupForm: {
        name: '',
        addTime: null,
        type: '',
        pageNum: 1,
        pageSize: 20,
      },
      formGroupList: [
        {
          label: '成员名称',
          value: '',
          prop: 'name',
          type: 'INPUT',
          emunName: ''
        },
        {
          label: '成员类型',
          value: '',
          prop: 'type',
          type: 'SELECT',
          emunName: 'typeList'
        },
        {
          label: '入群',
          value: null,
          prop: 'addTime',
          type: 'DATE_RANGE',
          emunName: '',
          formate: 'yyyy-MM-dd'
        },
      ],
      enumOpt: {
        typeList: [
          { dictValue: '1', dictLabel: '企业成员' },
          { dictValue: '2', dictLabel: '外部联系人' },
        ]
      },
      groupLoading: false,
      groupTotal: 0,
      customerList: [], // 群成员数据
      // 退出群成员
      queryOutGroupForm: {
        name: '',
        addTime: null,
        type: '',
        pageNum: 1,
        pageSize: 20,
      },
      formOutGroupList: [
        {
          label: '成员名称',
          value: '',
          prop: 'name',
          type: 'INPUT',
          emunName: ''
        },
        {
          label: '成员类型',
          value: '',
          prop: 'type',
          type: 'SELECT',
          emunName: 'typeList'
        },
        {
          label: '退群',
          value: null,
          prop: 'addTime',
          type: 'DATE_RANGE',
          emunName: '',
          formate: 'yyyy-MM-dd'
        },
      ],
      outLoading: false,
      lossCustomerList: [], //退群成员数据
      outGroupTotal: 0,
      //获取到的详情数据
      details: {
        tagVOS: [],
        groupName: '',
        notice: '',
        groupLeaderName: '',
        tags: '',
        memberCount: '0',
        toDayMemberNum: '0',
        todayLossMemberCount: '0',
      },
    }
  },
  created() {
    this.initDetailFn()
    this.handleGroupQuery()
    this.handleOutGroupQuery()
  },
  methods: {
    // 初始化查询
    initDetailFn() {
      if (this.$route.query.chatId) {
        checkOrUpdateTask({ chatId: this.$route.query.chatId }).then((res) => {
          if (res.code === 200) {
            if (res.data.tagVOS) {
              res.data.tagVOS1 = JSON.parse(JSON.stringify(res.data.tagVOS))
              res.data.tagVOS = []
              res.data.tagVOS1.forEach((tagGroup) => {
                tagGroup.tagName.split(',').forEach((tagName) => {
                  res.data.tagVOS.push({
                    groupName: tagGroup.groupName,
                    tagName,
                  })
                })
              })
            }
            this.details = res.data
          }
        })
      }
    },
    // 返回
    goBack() {
      this.$router.go(-1)
    },
    //查询群成员
    handleGroupQuery() {
      this.queryGroupForm.pageNum = 1;
      this.messagerecordFn();
    },
    messagerecordFn() {
      this.groupLoading = true;
      let param = {
        chatId: this.$route.query.chatId,
        name: this.queryGroupForm.name,
        type: this.queryGroupForm.type,
        beginTime: this.queryGroupForm.addTime?.[0],
        endTime: this.queryGroupForm.addTime?.[1],
        pageNum: this.queryGroupForm.pageNum,
        pageSize: this.queryGroupForm.pageSize,
      }
      messagerecord(param).then((res) => {
        if (res.code == 200) {
          this.customerList = res.rows
          this.groupTotal = res.total
        }
        this.groupLoading = false;
      }).catch(() => {})
    },
    // 群成员重置
    handleGroupReset() {
      this.queryGroupForm = {
        name: '',
        addTime: null,
        type: '',
        pageNum: 1,
        pageSize: 20,
      };
      this.messagerecordFn()
    },
    //群成员详情按钮
    detailRouter(sid) {
      this.$router.push({
        name: 'CustomerDetails',
        query: { sid: sid },
      })
    },
    handleGroupSizeChange(val) {
      this.queryGroupForm.pageNum = 1
      this.queryGroupForm.pageSize = val
      this.messagerecordFn()
    },
    handleGroupCurrentChange(val) {
      this.queryGroupForm.pageNum = val
      this.messagerecordFn()
    },
    //查询退群成员数据
    handleOutGroupQuery() {
      this.queryOutGroupForm.pageNum = 1;
      this.findLossMemberListFn();
    },
    findLossMemberListFn() {
      this.outLoading = true;
      let param = {
        chatId: this.$route.query.chatId,
        name: this.queryOutGroupForm.name,
        type: this.queryOutGroupForm.type,
        beginTime: this.queryOutGroupForm.addTime?.[0],
        endTime: this.queryOutGroupForm.addTime?.[1],
        pageNum: this.queryOutGroupForm.pageNum,
        pageSize: this.queryOutGroupForm.pageSize,
      }
      findLossMemberList(param).then((res) => {
        if (res.code == 200) {
          this.lossCustomerList = res.rows
          this.outGroupTotal = res.total
        }
        this.outLoading = false;
      }).catch(() => {})
    },
    //退群成员枚举值重置
    handleOutGroupReset() {
      this.queryOutGroupForm = {
        name: '',
        addTime: null,
        type: '',
        pageNum: 1,
        pageSize: 20,
      };
      this.findLossMemberListFn()
    },
    handleOutGroupSizeChange(val) {
      this.queryOutGroupForm.pageNum = 1
      this.queryOutGroupForm.pageSize = val
      this.findLossMemberListFn()
    },
    handleOutGroupCurrentChange(val) {
      this.queryOutGroupForm.pageNum = val
      this.findLossMemberListFn()
    },
  },
}
</script>

<style lang='scss' scoped>
@import '../../../styles/base.scss';

.module-list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  padding: 0 20px;
  .module {
    width: 470px;
    height: 100px;
    background: #fafafa;
    border-radius: 4px;
    // border: 1px solid #eeeeee;
    .number {
      font-size: 25px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      // font-weight: bold;
      color: #393b44;
      text-align: center;
      margin-top: 30px;
    }
    .label {
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #505050;
      text-align: center;
      margin-top: 10px;
    }
  }
}
.header-btn {
  @include headerBtn;
}
.wrap {
  @include titleWrap;
}
</style>
